<template>
  <div class="search">
    <div class="search-ss">
      <van-icon name="arrow-left" @click="goBack" />
      <form action="" @keyup.enter="goSearch">
        <van-search v-model="values" placeholder="请输入搜索关键词" />
      </form>
      <van-button type="default" @click="goSearch">搜索</van-button>
    </div>
    <div class="search-history">
      <div class="left">
        <van-icon name="search" />
        <div class="text">历史搜索</div>
      </div>
      <div class="right"><van-icon name="delete-o" @click="clearSearchHistory" /></div>
    </div>
    <ul v-if="historyList.length">
      <li v-for="(item, index) in historyList" :key="index">{{ item }}</li>
    </ul>
    <div v-else class="els">暂无历史记录</div>
    <div class="search-hot">
      <div class="hot"><van-icon name="star-o" />热门搜索</div>
      <ul>
        <li>短袖</li>
        <li>背带裤</li>
      </ul>
    </div>
  </div>
  <router-view></router-view>
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { showConfirmDialog } from "vant";
const router = useRouter();
const goBack = () => {
  router.back();
};
const values = ref("");
const goSearch = () => {
  if (!values.value) return;

  try {
    const stored = localStorage.getItem("searchList");
    let searchArr = [];

    if (stored) {
      searchArr = JSON.parse(stored);
    }

    searchArr.unshift(values.value);
    const uniqueSet = new Set(searchArr);
    const newArr = Array.from(uniqueSet);
    localStorage.setItem("searchList", JSON.stringify(newArr));
  } catch (error) {
    console.error("保存搜索记录失败:", error);
    // 初始化空的搜索列表
    localStorage.setItem("searchList", JSON.stringify([values.value]));
  }
  router.push({ path: "/Search/SearchIndex", query: { key: values.value } });
};
// 渲染搜索历史数据
const historyList = ref([]);
onMounted(() => {
  historyList.value = JSON.parse(localStorage.getItem("searchList"));
});
// 清空历史数据
const clearSearchHistory = () => {
  showConfirmDialog({
    title: "清空历史记录",
    message: "是否清空历史记录？",
  })
    .then(() => {
      localStorage.removeItem("searchList");
      historyList.value = [];
    })
    .catch(() => {
      console.log("不清空");
    });
};
</script>
<style lang="less" scoped>
.search {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #fff;
  height: 100vh;
  .search-ss {
    display: flex;
    align-items: center;
    width: 100%;
    .van-icon {
      background-color: #fff;
      font-size: 20px;
      height: 54px;
      line-height: 54px;
      flex: 1;
    }
    .van-button {
      padding: 0;
      font-size: 16px;
      border: #fff;
      border: 0px;
      height: 54px;
      flex: 1;
    }
    .van-search {
      flex-shrink: 0;
      width: 260px;
      border: 0px #fff;
    }
  }
  .search-history {
    height: 30px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .icon-Magnifier {
      width: 10px;
      height: 10px;
    }
    .left {
      height: 30px;
      display: flex;
      line-height: 30px;
      padding: 10px 0 5px 5px;
      background-color: #fff;
      color: #858484;
      .van-icon {
        font-size: 20px;
        line-height: 30px;
      }
      .text {
        font-size: 15px;
      }
    }
    .right {
      line-height: 30px;
      .van-icon {
        padding-right: 16px;
        font-size: 18px;
        line-height: 30px;
      }
    }
  }
  ul {
    width: 100%;
    background-color: #fff;
    display: flex;
    padding: 5px 10px;

    li {
      font-size: 16px;
      margin: 5px 4px;
      border: 1px solid rgb(177, 169, 169);
    }
  }
  .hot {
    height: 30px;
    display: flex;
    line-height: 18px;
    padding: 10px 0 5px 5px;
    background-color: #fff;
    color: #858484;
    font-size: 15px;
  }
}
.els {
  font-size: 16px;
  color: #858484;
  text-align: center;
}
</style>
